{% extends 'base.html' %}
{% load static %}

{% block title %}My Profile{% endblock %}

{% block extra_css %}
<style>
    .profile-header {
        background-color: #f8f9fa;
        padding: 2rem 0;
        margin-bottom: 2rem;
        border-radius: 0.5rem;
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid #fff;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
    .stats-card {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        transition: transform 0.3s ease;
    }
    .stats-card:hover {
        transform: translateY(-5px);
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- Profile Header -->
    <div class="profile-header text-center mb-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <img src="{% if user.profile.avatar %}{{ user.profile.avatar.url }}{% else %}{% static 'img/default-avatar.png' %}{% endif %}" 
                         alt="Profile Picture" 
                         class="profile-avatar mb-3">
                    <h2>{{ user.get_full_name|default:user.username }}</h2>
                    <p class="text-muted">
                        {% if user.is_staff %}
                            <span class="badge bg-primary">Staff</span>
                        {% endif %}
                        {% if user.is_superuser %}
                            <span class="badge bg-danger">Admin</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left Column -->
        <div class="col-lg-4 mb-4">
            <!-- Personal Info Card -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Personal Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-muted mb-1">Username</h6>
                        <p class="mb-0">{{ user.username }}</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="text-muted mb-1">Email</h6>
                        <p class="mb-0">{{ user.email }}</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="text-muted mb-1">Joined</h6>
                        <p class="mb-0">{{ user.date_joined|date:"F d, Y" }}</p>
                    </div>
                    <div class="d-grid gap-2">
                        <a href="{% url 'password_change' %}" class="btn btn-outline-primary">
                            <i class="fas fa-key me-1"></i> Change Password
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Quick Stats</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="stats-card p-3">
                                <h3 class="text-primary">{{ user.appointments.count|default:0 }}</h3>
                                <p class="mb-0 text-muted">Appointments</p>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="stats-card p-3">
                                <h3 class="text-success">{{ user.tasks.count|default:0 }}</h3>
                                <p class="mb-0 text-muted">Tasks</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-lg-8">
            <!-- Recent Activity -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Recent Activity</h5>
                    <a href="#" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if recent_activities %}
                        <div class="list-group list-group-flush">
                            {% for activity in recent_activities %}
                            <div class="list-group-item border-0 px-0">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">{{ activity.title }}</h6>
                                    <small class="text-muted">{{ activity.timestamp|timesince }} ago</small>
                                </div>
                                <p class="mb-1">{{ activity.description }}</p>
                                {% if activity.link %}
                                    <a href="{{ activity.link }}" class="btn btn-sm btn-outline-primary mt-1">View</a>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted text-center my-4">No recent activity to display.</p>
                    {% endif %}
                </div>
            </div>

            <!-- Upcoming Appointments -->
            <div class="card shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Upcoming Appointments</h5>
                    <a href="{% url 'appointments:appointment-list' %}" class="btn btn-sm btn-outline-primary">View All</a>
                </div>
                <div class="card-body">
                    {% if upcoming_appointments %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Service</th>
                                        <th>Date & Time</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for appt in upcoming_appointments %}
                                    <tr>
                                        <td>{{ appt.service.name }}</td>
                                        <td>{{ appt.start_time|date:"M d, Y H:i" }}</td>
                                        <td>
                                            <span class="badge bg-{{ appt.get_status_display|lower }}">
                                                {{ appt.get_status_display }}
                                            </span>
                                        </td>
                                        <td>
                                            <a href="{% url 'appointments:appointment-detail' appt.pk %}" 
                                               class="btn btn-sm btn-outline-primary">
                                                View
                                            </a>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-muted text-center my-4">No upcoming appointments.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize any JavaScript plugins or custom behavior here
        // For example, you could initialize a calendar or other interactive elements
    });
</script>
{% endblock %}